<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src * data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" href="css/framework7.material.min.css">
        <link rel="stylesheet" href="css/framework7-icons.css">
        <link rel="stylesheet" href="css/index.css">
        <title>泡陌</title>
    </head>
    <body>
        <div class="panel-overlay"></div>
        <div class="panel panel-left panel-reveal">
            <div class="content-block my-overlay">
                <img class="my-overlay-avatar" src="img/avatar.jpg">
                <h1 class="my-overlay-username my-overlay-non">用户名</h1>
                <p class="my-overlay-intro my-overlay-non">介绍一下自己</p>
            </div>
        </div>

        <div class="views">
            <div class="view view-main">
                <div class="pages">
                    <div data-page="index" class="page navbar-fixed toolbar-fixed">
                        <div class="navbar">
                            <div class="navbar-inner">
                                <div class="left">
                                    <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
                                </div>
                                <div class="center">泡陌(<span class="my-chatroom-numbers">1</span>)</div>
                                <div class="right">
                                    <label class="label-switch my-switch">
                                        <input type="checkbox">
                                        <div class="checkbox"></div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="toolbar messagebar">
                            <div class="toolbar-inner">
                                <textarea placeholder="└(^o^)┘"></textarea>
                                <a href="#" class="link">发送</a>
                            </div>
                        </div>

                        <div class="speed-dial">
                            <a href="#" class="floating-button">
                                <i class="icon icon-plus"></i>
                                <i class="icon icon-close"></i>
                            </a>
                            <div class="speed-dial-buttons">
                                <a class="my-load-radar" href="#">
                                    <i class="f7-icons">compass</i>
                                </a>
                                <a class="my-reScan" href="#">
                                    <i class="f7-icons">reload</i>
                                </a>
                            </div>
                        </div>

                        <div class="page-content messages-content">
                            <div class="messages">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="cordova.js"></script>
        <script src="js/framework7.min.js"></script>
        <script src="js/socket.io.min.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>
